<template>
  <div id="trends">
     <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="dataList.length == 0 ? '暂无数据' : '没有更多了'"
        @load="getDataList">
         <div class="two-part-main" v-for="(item,index) in dataList" :key="index">
            <div class="two-part-title" @click="gotoPersonal(item)">
            <div class="avatar" :style="{backgroundImage: `url(${item.avatar ? store.state.imgUrl + item.avatar : logo})`}"></div>

              <!-- <van-image :src="item.avatar ? store.state.imgUrl + item.avatar : logo" round style="margin-right:5px"/> -->
            <div>
                <div>{{item.name}}</div>
                <div><span>{{item.convertTime}}</span> {{item.isAttention ? '已关注' : '未关注'}}</div>
            </div>
            </div>
            <div v-if="item.title" class="desc" @click="handleDetail(item.id)">{{item.title}}</div>
            <div class="descDetail" style="font-size:14px;color:#a6a6a6;padding-top:5px" @click="handleDetail(item.id)">{{item.description}}</div>
            <div class="image-list">
            <div class="item-list-item" v-for="(img,index) in item.children ? item.children.slice(0,3) : [] " :key="index" @click="handleImageClick(item.children,index)"
                :style="{backgroundImage:'url('+img+')'}">
                <div class="more" v-if="item.children.length > 3 && index === 2">+{{item.children.length > 3 ?  item.children.length -3 : ''}}</div>
            </div>
            </div>
            <div class="remark">
              <div @click="gotodz(item,index)">
                  <img :src="remarkList.urldz" width="15" v-if="!item.isLike"/>
                  <img :src="remarkList.urldzlove" v-if="item.isLike" width="15"/>
                  <div>{{ item.likeNum }}</div>
                </div>
                <div @click="handleDetail(item.id)">
                  <img :src="remarkList.urlpl" width="15"/>
                  <div>{{ item.commentNum }}</div>
                </div>
                <div @click="addCollect(item,index)">
                  <img :src="remarkList.urlsc" width="16" v-if="!item.isCollect"/>
                  <img :src="remarkList.urlsclove" width="16" v-if="item.isCollect"/>
                  <div>{{ item.collectNum }}</div>
                </div>
                <div @click="gotozf(item)">
                  <img :src="remarkList.urlzf" width="15"/>
                  <div>分享</div>
                </div>
                <img src="@/assets/remark/jb.png" @click="gotojb(item)" v-if="!item.isOwn == 0">
            </div>
            <Report ref="report" v-if="jbvisible && item.id === clickId"  :type="type" @close="close"></Report>
            
            <!-- <div class="jb-dialog" v-if="jbvisible">
                <div class="title">举报</div>
                <div class="jb-item-all">
                <div class="jb-item" v-for="(item,index) in jbList" :key="index">
                {{ item.name }}
                </div>
            </div>
            </div> -->
         </div>
      </van-list>
  </div>
</template>

<script>
import {contentSearchApi, updateLikes, addCollect} from '@/api/share.js'
import {ImagePreview}  from 'vant'
import Report from "./report.vue";

import {antiShake} from '@/utils/antie.js'//防抖函数
import store from '@/store'
export default {
  components:{Report},
   props: {
      searchValue: {
        type: String,
        default: null
      },
      token: {
        type: String,
        default: null
      }
  },
  data(){
    return{
      store:store,
      commentType:1,
      routerId:-3,
      remarkList: {
        urlsclove: require('@/assets/remark/sc_love.png'),
        urldzlove: require('@/assets/remark/dz_love.png'),
        urldz: require('@/assets/remark/dz.png'),
        urlpl: require('@/assets/remark/pl.png'),
        urlsc: require('@/assets/remark/sc.png'),
        urlzf: require('@/assets/remark/zf.png'),
      },
     jbvisible: false,
      dataList:[],
      loading:false,
      finished:false,
      current:1,
      pageSize:10,
      clickId:'',
      type:'',
      logo: require("@/assets/title3.png"),
      
    }
  },
  mounted(){
    window["getInfoFromFlutter"] = (info) => {
      if (JSON.parse(info).action === 'share') {
           this.getInfoFromFlutter(info);
        
      }
    };
  },
  created(){
    // if (this.searchValue) {
    //   this.getDataList()
      
    // }
  },
  methods:{
    init(){
      this.dataList = []
      this.current = 1
      this.finished = false
    },
     getInfoFromFlutter(info) {
      let data = JSON.parse(info)
        if (data.param.succeed == 1) {
          this.$toast.success('分享成功')
        } else {
          this.$toast.fail('已取消分享')
        }
    },
    handleDetail(id){
      this.$router.push(
          {
            path: '/trendsDetail',
             query: {
              id:id
            }
          }
        )
      // let data = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name:'/home/share/trendsDetail',
      //     url: `${this.$store.state.linkUrl}/trendsDetail?id=${id}&token=${this.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(data))
    },
    getDataList(){//删除搜索记录
    this.loading = true
     if (this.searchValue) {
       contentSearchApi(
          {
            search:this.searchValue,
            commentType:this.commentType,
            routerId:this.routerId,
            size: this.pageSize,
            current:this.current,
            token:this.token
          }
        ).then((res)=>{
          // this.loading = false;
          //   this.dataList = [...this.dataList, ...res.data.records];
          //     if (res.data.records.length < 1) {
          //     // 将finished设置为true,表示所有数据加载完毕
          //         this.finished = true;
          //     }
          if (res.data.records !== null) {
              this.dataList.push(...res.data.records)
              // 3. 加载结束
              this.loading = false
              if (res.data.records.length >= 10) {
                this.current += 1
              } else {
                this.finished = true
              }
              
          } else {
              this.finished = true
          }
          
        })
      }else{
             this.dataList = []
             this.loading = false
             this.finished = true;
          }  
       
    },
    gotojb(item) {
      console.log('1111111111111')
        this.jbvisible = true
        this.clickId = item.id
        this.type = 'content'
        console.log(this.$refs)
        this.$nextTick(()=>{
        
        this.$refs.report[0].init(item)
      })
    },
    close() {
      this.jbvisible = false
    },
    getDataSearch(){
      this.current = 1
      this.finished = false
      this.dataList = []
      this.getDataList()
    },
    handleImageClick(item,index) {//图片预览
        const imageUrls = item.map(image => image);
            ImagePreview({
            images: imageUrls,
            startPosition: index,
            showIndicators:true,
            closeable:true
        });
    },
    //点赞
    gotodz: antiShake( function (item,index){
      let data = {
        id: item.id,
        type: 0 //文章，动态，视频是0 评论是1
      }
      updateLikes(data).then((res) => {
        if (res.code == 0) {
          if (item.isLike) {
           this.$toast.fail('已取消点赞')
          }else{
           this.$toast.success('点赞成功')
          }
          item.likeNum += !item.isLike ? 1 : -1;
          this.dataList[index].isLike = !this.dataList[index].isLike
        }
      }).catch((err) => {
        this.$toast.fail('点赞失败')
      })
    }),
     // 收藏
    addCollect: antiShake(  function (item,index) {
        let data = {
          id: item.id,
          type: 0 //文章，动态，视频是0 评论是1
      }
      addCollect(data).then((res) => {
        if (res.code == 0) {
            if (item.isCollect) {
              this.$toast.fail('取消收藏！')
            }else{
            this.$toast.success('收藏成功')
            }
          item.collectNum += !item.isCollect ? 1 : -1;
          this.dataList[index].isCollect = !this.dataList[index].isCollect

        }
      }).catch((err) => {
        this.$toast.fail('收藏失败')
      })
    }),
    gotozf(item){
       let message = {
        action: 'share',
        param: {
          type: "link",            //必填
          title: item.title,          //必填
          name: '/home/share/index',
          subtitle: item.description,
          link: "http://192.168.110.105:9033/#/trendsDetail?"+item.id,//动态列表的详情?id:''
          callback: 1
        }
      }
      // console.log(message)
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
     // 跳转到主页
    gotoPersonal(item) {
      if (item.isOwn == 0) {//跳转到自己的个人主页
        this.$router.push({path: '/personalPage',query:{}})
      }else{//跳转到别人主页的个人主页
        this.$router.push({path: '/visitPersonal',query:{obj:JSON.stringify(item)}})
      }
    }
  }
}
</script>

<style lang="less" scoped>
#trends{
  .two-part-main {
      padding: 10px 10px 0 10px;
      position: relative;

     

      .two-part-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .avatar{
          border: 1px solid #ebeef5;
          background-size: 100%;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          opacity: 1;
          margin-right:5px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        > .van-image {
          width: 38px;
          height: 38px;
          margin-right: 8px;
        }

        div:nth-child(1) {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(0, 0, 0, 1);
        }

        div:nth-child(2) {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(153, 153, 153, 1);
          text-align: left;
        }
      }
       .descDetail{
      //  height: 55px;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 设置最大行数 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word; /* 允许换行 */
          line-height: 1.5; /* 行高，可根据需要进行调整 */
    }

      .desc {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24.62px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
        padding-top: 10px;
      }

      .image-list {
        padding: 15px 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        .item-list-item:nth-of-type(3n + 0) {
          margin-right: 0;
        }

        .item-list-item {
          width: calc((100% - 14px) / 3);
          height: 114px;
          border-radius: 5px;
          margin-right: 7px;
          position: relative;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        background-position: center;
        background-size: cover;


          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36px;
            height: 26px;
            opacity: 1;
            border-radius: 5px 0px 5px 0px;
            background: rgba(0, 0, 0, 0.47);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.5px;
            line-height: 26px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
          }
        }
      }

      .remark {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;

        > img {
          width: 11px;
          height: 11px;
          opacity: 1;
        }

        > div {
          display: flex;
          align-items: center;

          img {
            // width: 12.56px;
            // height: 15.28px;
            // opacity: 1;
          }

          > div {
            margin-left: 4px;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 17.38px;
            color: rgba(81, 81, 81, 1);
            text-align: left;
          }
        }
      }
     }
}
</style>